<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted} from "vue";

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTI3OGI2Ni05YmJhLTRlMTYtYjdiNC1hM2E5ZjI1MGYxZmIiLCJpZCI6MTQ0NTcxLCJpYXQiOjE3MDMxNTQ2MzZ9.-ab5sCTIXoyCUMMGv35NQBbR0h7pxsxu78D3AfCVTek'
  const customImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
  })
  const mapboxImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  })
  var url = 'http://localhost:8081/geoserver/nurc/wms'; //Geoserver URL
  // Cesium之Viewer初始常用配置
  const viewer = new Cesium.Viewer('cesiumContainer', {
    shadows: false, // 阴影
    animation: false, // 左下角控制动画
    baseLayerPicker: false, // 右上角图层选择器
    fullscreenButton: false, // 全屏
    geocoder: false, // 右上角搜素
    homeButton: false, // 主页
    infoBox: false, // 信息框
    scene3DOnly: true, // 仅仅显示3D，可以隐藏右上角2D和3D按钮
    selectionIndicator: false, // 绿色选择框
    timeline: false, // 最下面时间轴
    navigationHelpButton: true, // 右上角帮助按钮
    navigationInstructionsInitiallyVisible: true, // 导航指令
    useDefaultRenderLoop: true,
    showRenderLoopErrors: true,
    projectionPicker: false, // 投影选择器
    // terrainProvider: Cesium.createWorldTerrainAsync(), // 地形
    // imageryProvider:  wmsImageryProvider // 影像图
  });
  viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
  // 取消双击时间
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
  viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium icon
  // document.querySelector('.cesium-infoBox-camera').style.display = 'none';//隐藏infobox camera
  // 加载离线地图服务 - web服务影像提供器来实例化影像图层
  const imageryLayers = viewer.imageryLayers;
  const scene = viewer.scene;
  const provider = new Cesium.WebMapServiceImageryProvider({
    url: "http://localhost:8086/geoserver/ne/wms",
    layers: "ne:world",
    parameters: {
      format: "image/png",
      transparent: true,
      srs: "EPSG:4326"
    },
  });
  imageryLayers.addImageryProvider(provider);
  // 几何图形的绘制
  // 【点】
  const myPoint = {
    // id、name、show、position是所有Entity的公共属性
    id: 'point-uid141adsf',
    name: '点案例',
    // 是否显示
    show: true,
    // 添加属性position设置点的位置，将经纬度坐标转换为笛卡尔空间直角坐标系
    position: Cesium.Cartesian3.fromDegrees(118, 32, 1),
    // 设置point点对象的属性
    point: {
      color: Cesium.Color.DODGERBLUE, // 点的颜色
      pixelSize: 10, // 点的大小
    }
  }
  viewer.entities.add(myPoint)
  // 【线】
  const myLine = {
    id: 'line-uid1238asad',
    name: 'myLine',
    show: true,
    // 设置Line对象的属性
    // 添加polyline对象，用于描述折线，并为polyline对象添加属性positions
    // 指定起点和重点
    polyline: {
      // 折线的起点和重点
      positions: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32]),
      // 折线的宽度
      width: 3,
      // 设置线条覆盖的材质
      material: Cesium.Color.RED,
      // clampToGround: true, // 是否贴地
    }
  }
  viewer.entities.add(myLine)
  // 【面】
  const polygon = {
    id: 'polygon-uidasd1234jpois',
    name: 'polygon',
    show: true,
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        118, 30,
        119, 32,
        116, 32,
        116, 30,
      ]),
      outline: false, // 边界
      material: Cesium.Color.LIGHTBLUE.withAlpha(.4)
    }
  }
  viewer.entities.add(polygon)
  // [矩形]
  const rectangle = {
    id: 'rectangle-uid81jpaj231',
    name: 'rectangle',
    show: true,
    rectangle: {
      // 通过coordinates来指定矩形的端点坐标
      // 规则： 西南 - 东北
      coordinates: Cesium.Rectangle.fromDegrees(80.0, 30.0, 100.0, 35.0),
      material: Cesium.Color.PINK.withAlpha(.6),
    }
  }
  viewer.entities.add(rectangle)

  // 【椭圆】
  const ellipse = {
    id: 'ellipse-uid1234jsdfg',
    name: 'ellipse',
    show: true,
    // 指定经纬度坐标
    position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
    ellipse: {
      // 长半轴
      semiMajorAxis: 400000.0,
      // 短半轴
      semiMinorAxis: 200000.0,
      // 覆盖材质
      material: Cesium.Color.CYAN.withAlpha(.5),
    }
  }
  viewer.entities.add(ellipse);

  // 【圆柱体】
  const myCylinder = {
    id: 'cylinder-ui1234asf',
    name: 'MyCylinder',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(100.0, 40.0, 200000.0),
    cylinder: {
      length: 400000.0, // 圆柱体长度
      topRadius: 200000.0, // 顶部半径
      bottomRadius: 200000.0, // 底部半径
      material: Cesium.Color.CHOCOLATE.withAlpha(.8),
      outline: true,
      outlineColor: Cesium.Color.RED,
    }
  }
  viewer.entities.add(myCylinder)
  // 【走廊 - corridor】
  const myCorridor = {
    id: 'corridor-uidjasd1234',
    name: 'MyCorridor',
    show: true, // 是否显示实体和子实体
    // 设置corridor走廊属性
    corridor: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        100.0, 40.0,
        105.0, 40.0,
        105.0, 35.0,
      ]),
      width: 200000.0,
      material: Cesium.Color.YELLOW.withAlpha(.6)
    }
  }
  viewer.entities.add(myCorridor)
  // 【墙】
  const myWall = {
    id: 'wall-uid1324asdf',
    name: 'MyWall',
    show: true,
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        107.0, 43.0, 200000.0,
        97.0, 43.0, 100000.0,
        97.0, 40.0, 100000.0,
        107.0, 40.0, 100000.0,
        107.0, 43.0, 100000.0,
      ]),
      material: Cesium.Color.YELLOWGREEN.withAlpha(.8),
    }
  }
  viewer.entities.add(myWall)
  // 【方盒】
  const myBox = {
    id: 'box-uid132jasd',
    name: 'MyBox',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(117, 33, 200000.0),
    box: {
      // 设置盒子的大小（长宽高
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 400000.0),
      material: Cesium.Color.BLUE,
    }
  }
  viewer.entities.add(myBox)
  // 【椭球体】
  const myEllipsoid = {
    id: 'ellipsoid-uid132jiasd',
    name: 'MyEllipsoid',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(118, 38.1234123, 300000.0),
    // 设置椭球体属性
    ellipsoid: {
      radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
      material: Cesium.Color.RED.withAlpha(.8),
      show: true,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
    }
  }
  viewer.entities.add(myEllipsoid);
  let hprData = {
    degree: 60, // 度数
    heading: Cesium.Math.toRadians(10), // 模型航向
    pitch: 0, // 俯仰角
    roll: 0, // 翻滚叫
  }
  const hpr = new Cesium.HeadingPitchRoll(hprData.heading, hprData.pitch, hprData.roll);
  const GrassModel = {
    id: 'grassModel',
    name: '草坪',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(118, 30, 50000.0), // 模型位置
    orientation: Cesium.Transforms
        .headingPitchRollQuaternion(
            Cesium.Cartesian3.fromDegrees(118, 30, 5000), // 小车位置
            hpr // 小车方向
        ),
    model: {
      uri: '/model/CesiumAir/Cesium_Air.glb',
      minimumPixelSize: 30, // 模型最小
      maximumPixelSize: 50000, // 模型最大
      scale: 50000, // 当前比例
    }
  }
  viewer.entities.add(GrassModel)
  // 【广告牌】
  const billboard = {
    id: 'billboard-uid123jijsdf',
    name: 'billboard',
    show: true,
    position: Cesium.Cartesian3.fromDegrees(108, 30, 50),
    billboard: {
      image: '/images/ShangHai.png',
      scale: .1, // 尺寸比例
    }
  }
  viewer.entities.add(billboard)

  viewer.flyTo(viewer.entities)

})
</script>

<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
